<template>
  <div class="book-detail-area">
    <div class="middle">
      <bread-crumb class="bread-crumb-padding" :list="breadCrumb"></bread-crumb>
      <div class="box top-box m-b-20 flx-col-c-c">
        <h2 class="f-16 c-d f-w-600">输入您想注册的商标，在线客服极速响应</h2>
        <span class="f-14 c-g">15秒快速查询商标</span>
        <div class="flx-row-s-c" style="margin-top: 24px">
          <input
            v-model.trim="search"
            type="text"
            class="search"
            placeholder="请输入关键字查询"
            maxlength="50"
            @keyup.enter="submit"
          />
          <div class="search-buttom">查询能否注册</div>
        </div>
      </div>
      <div class="box m-b-20">
        <user-tab-list :list="tablist"></user-tab-list>
        <div class="main-padding" style="position: relative">
          <Spin :withIcon="true" v-if="loading"></Spin>
          <div class="m-l-285 flx-row-s-c m-b-20">
            <span
              class="tab-item f-16"
              style="margin-right: 33px"
              v-for="(item, index) in typeTabList"
              :key="index"
              :class="[index == typeSelect ? 'active' : 'normal']"
              >{{ item }}</span
            >
          </div>
          <div class="flx-row-s-s m-b-20">
            <span class="item-title nes c-d">想要购买的商标：</span>
            <Input
              v-model.trim="dn"
              placeholder="请输入您想代购的域名"
              maxlength="30"
              style="width: 400px"
              type="text"
              size="large"
            />
          </div>
          <div class="flx-row-s-s m-b-20">
            <span class="item-title nes c-d">商标分类：</span>
            <Select v-model="type" size="large" style="width: 400px">
              <Option
                v-for="item in categaryList"
                :value="item.value"
                :key="item.value"
                >{{ item.name }}</Option
              >
            </Select>
          </div>
          <div class="flx-row-s-s m-b-20">
            <span class="item-title nes c-d">您的预算：</span>
            <Input
              v-model.trim="budget"
              maxlength="30"
              style="width: 400px"
              type="number"
              size="large"
            />
          </div>
          <div class="flx-row-s-s m-b-20">
            <span class="item-title c-d">留言：</span>
            <Input
              v-model="remark"
              type="textarea"
              style="width: 400px"
              :rows="4"
            />
          </div>
          <div class="flx-row-s-s m-b-20">
            <span class="item-title nes c-d">验证码</span>
            <Input
              v-model="photoCode"
              maxlength="4"
              style="width: 280px; margin-right: 20px"
              size="large"
            />
            <div class="code-area" @click="refreshCode">
              <Identify
                :identifyCode="identifyCode"
                :contentWidth="100"
                :contentHeight="40"
                :fontSizeMax="25"
              />
            </div>
          </div>
          <div
            class="m-l-285 big-button-size-40 user-strong-button m-b-20"
            style="width: 120px"
          >
            提交申请
          </div>
          <span class="c-o f-14 m-l-285"
            >温馨提示:申请提交后，我们将安排专届客服于一个工作日内与您联系。</span
          >
          <span class="c-d f-14 m-l-285"
            >温馨提示：提交申请前，请先进行
            <a class="c-b" href="/login">登录</a> 或
            <a class="c-b" href="/login/re">注册</a></span
          >
          <div class="tips-area" style="margin-top: 20px">
            <p class="f-16 c-o f-w-600" style="margin-bottom: 16px">
              商标代购说明
            </p>
            <p v-for="(item, index) in tips" :key="index">{{ item }}</p>
          </div>
        </div>
      </div>
      <agent-list></agent-list>
    </div>
  </div>
</template>

<script>
import { makeCode } from "@/utils/format";
export default {
  components: {
    userTabList: () => import("_c/tabList/userTabList.vue"),
    Identify: () => import("_c/identify"),
    agentList: () => import("_c/agentList/agentList.vue"),
  },
  data() {
    return {
      loading: false,
      formLoading: false,
      breadCrumb: [{ name: "商标服务", to: "/rmregister" }],
      search: "",
      tablist: [
        {
          name: "商标市场",
          to: "/rmregisterm",
        },
        {
          name: "商标中介",
          to: "/rmregisteri",
        },
      ],
      typeTabList: ["委托代购商标", "委托出售商标"],
      typeSelect: 0,
      dn: "",
      categaryList: [],
      type: null,
      budget: null,
      remark: "",
      photoCode: "",
      identifyCode: "",
      tips: [
        "1、发起代购交易无需支付费用，待平台经纪人确认后缴纳基础调查费，保证金2000元。若代购不成功，将退回保证金，基础调查费不予退回。",
        "2、确认商标可购买正式进入代购交易流程后，买方不得单方面取消代购，否则视为违约，扣除保证金2000元。",
        "3、代购交易服务费根据商标的实际情况收取。",
      ],
    };
  },
  mounted() {
    this.identifyCode = makeCode(this.identifyCodes, 4);
  },
  methods: {
    // 刷新验证码
    refreshCode() {
      this.identifyCode = makeCode(this.identifyCodes, 4);
    },
  },
};
</script>

<style lang="scss" scoped>
.book-detail-area {
  background-color: #f7f7f7;
  padding-bottom: 20px;

  .box {
    background-color: #fff;
    border: 1px solid #eaeaea;
    margin-bottom: 15px;
  }
  .top-box {
    padding: 40px 0;

    .search {
      @include size(580px, 46px);
      background-color: #fff;
      padding-left: 20px;
      padding-right: 15px;
      border: #f9521f solid 1px;
      border-radius: 5px 0 0 5px;
      line-height: 44px;
      font-size: 14px;
      color: #3d3d3d;
    }
    .search-buttom {
      @include size(120px, 46px);
      @include h-c(#f9521f, #fa754c, #fff, null);
      @include btn-s(null, 46px, 0 5px 5px 0);
      font-size: 14px;
    }
  }
  .main-padding {
    padding: 35px 130px 35px;
  }
  .tab-item {
    transition: color 0.3s, font-weight 0.3s;

    &.active {
      color: #f9521f;
      font-weight: 600;
    }
    &.normal {
      @include h-c(null, null, rgba(#3d3d3d, 0.8), #f9521f);
      cursor: pointer;
    }
  }
  .item-title {
    width: 130px;
    text-align: right;
    margin-right: 15px;
    line-height: 40px;
    font-size: 14px;
    margin-left: 140px;

    &.nes::before {
      content: "*";
      color: #f9521f;
      font-weight: 600;
    }
  }
}
.m-b-20 {
  margin-bottom: 20px;
}
.m-l-285 {
  margin-left: 285px;
}
.tips-area {
  padding: 22px;
  border: $mainColor solid 1px;
  background-color: $color-main;
  font-size: 14px;
  color: $mainColor;

  p {
    line-height: 24px;
  }
}
</style>